2. syyskuuta 2025Suomi

Tutustu Reactin experimental_useFormStatus-koukkuun tehostetussa lomakkeen tilanhallinnassa. Opi sen toteutus, hyödyt ja edistynyt käyttö esimerkkien avulla.

Reactin experimental_useFormStatus-toteutus: Parannettu lomakkeen tilanhallinta

Reactin jatkuvasti kehittyvä maailma esittelee jatkuvasti uusia työkaluja ja tekniikoita parantamaan kehittäjäkokemusta ja sovellusten suorituskykyä. Yksi tällainen kokeellinen ominaisuus on experimental_useFormStatus-koukku, joka on suunniteltu yksinkertaistamaan lomakkeen tilanhallintaa, erityisesti palvelintoimintojen (server actions) ja progressiivisen parantamisen (progressive enhancement) yhteydessä. Tämä kattava opas tutkii experimental_useFormStatus-koukkua yksityiskohtaisesti, tarjoten käytännön esimerkkejä ja näkemyksiä sen tehokkaaseen hyödyntämiseen.

Mitä on `experimental_useFormStatus`?

experimental_useFormStatus-koukku on React-tiimin esittelemä kokeellinen API, joka tarjoaa suoraviivaisemman tavan seurata lomakkeen lähetyksen tilaa, erityisesti palvelintoimintoja käytettäessä. Ennen tätä koukkua lomakkeen eri tilojen (lepotila, lähetys, onnistunut, virhe) hallinta vaati usein monimutkaista tilanhallintalogiikkaa. experimental_useFormStatus pyrkii poistamaan suuren osan tästä monimutkaisuudesta tarjoamalla yksinkertaisen ja tehokkaan tavan seurata ja reagoida lomakkeen lähetystiloihin.

Tärkeimmät hyödyt:

Yksinkertaistettu tilanhallinta: Vähentää lomakkeen lähetystilojen hallintaan tarvittavan rutiinikoodin määrää.
Parannettu käyttäjäkokemus: Mahdollistaa reagoivammat käyttöliittymäpäivitykset lomakkeen tilan perusteella.
Parempi koodin luettavuus: Tekee lomakkeisiin liittyvästä koodista helpommin ymmärrettävää ja ylläpidettävää.
Saumaton integraatio palvelintoimintojen kanssa: Suunniteltu toimimaan erityisen hyvin React Server Components -komponenttien ja palvelintoimintojen kanssa.

Perustoteutus

Havainnollistaaksemme experimental_useFormStatus-koukun perustoteutusta, tarkastellaan yksinkertaista yhteydenottolomake-esimerkkiä. Tämä lomake kerää käyttäjän nimen, sähköpostiosoitteen ja viestin ja lähettää sen palvelintoiminnon avulla.

Edellytykset

Ennen koodiin sukeltamista varmista, että sinulla on React-projekti, jossa on seuraavat asetukset:

React-versio, joka tukee kokeellisia API:ita (tarkista vaadittu versio Reactin dokumentaatiosta).
React Server Components -ominaisuus käytössä (tyypillisesti käytössä kehyksissä kuten Next.js tai Remix).

Esimerkki: Yksinkertainen yhteydenottolomake

Tässä on perusmuotoinen yhteydenottolomake-komponentti:

```jsx // app/actions.js (Server Action) 'use server' export async function submitContactForm(formData) { // Simulate a database call or API request await new Promise(resolve => setTimeout(resolve, 2000)); const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name || !email || !message) { return { success: false, message: 'All fields are required.' }; } try { // Replace with actual API call or database operation console.log('Form submitted:', { name, email, message }); return { success: true, message: 'Form submitted successfully!' }; } catch (error) { console.error('Error submitting form:', error); return { success: false, message: 'Failed to submit form.' }; } } // app/components/ContactForm.jsx (Client Component) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function ContactForm() { return (

Name:

Email:

Message:

</div>
      <SubmitButton />
    </form>
  );
}
```

<h3>Selitys</h3>

<ul>
  <li><b>Palvelintoiminto (<code>app/actions.js</code>):</b> Tämä tiedosto määrittelee <code>submitContactForm</code>-funktion, joka on palvelintoiminto. Se simuloi API-pyyntöä 2 sekunnin viiveellä havainnollistaakseen lomakkeen lähetyksen asynkronista luonnetta. Se hoitaa myös perusvalidioinnin ja virheidenkäsittelyn.</li>
  <li><b>Asiakaskomponentti (<code>app/components/ContactForm.jsx</code>):</b> Tämä tiedosto määrittelee <code>ContactForm</code>-komponentin, joka on asiakaskomponentti. Se tuo <code>experimental_useFormStatus</code>-koukun ja <code>submitContactForm</code>-toiminnon.</li>
  <li><b><code>useFormStatus</code>-koukun käyttö:</b> <code>SubmitButton</code>-komponentin sisällä kutsutaan <code>useFormStatus</code>-koukkua. Tämä koukku antaa tietoa lomakkeen lähetystilasta.</li>
  <li><b><code>pending</code>-ominaisuus:</b> <code>useFormStatus</code>-koukun palauttama <code>pending</code>-ominaisuus kertoo, onko lomaketta parhaillaan lähettämässä. Sitä käytetään lähetyspainikkeen poistamiseen käytöstä ja "Lähetetään..."-viestin näyttämiseen.</li>
  <li><b>Lomakkeen sidonta:</b> <code>form</code>-elementin <code>action</code>-attribuutti on sidottu <code>submitContactForm</code>-palvelintoimintoon. Tämä kertoo Reactille, että palvelintoimintoa kutsutaan, kun lomake lähetetään.</li>
</ul>

<h2>Edistynyt käyttö ja huomioitavat seikat</h2>

<h3>Onnistumis- ja virhetilojen käsittely</h3>

<p>Vaikka <code>experimental_useFormStatus</code> yksinkertaistaa lähetystilan seurantaa, onnistumis- ja virhetilat on usein käsiteltävä erikseen. Palvelintoiminnot voivat palauttaa dataa, joka ilmaisee onnistumisen tai epäonnistumisen, jota voit sitten käyttää käyttöliittymän päivittämiseen.</p>

<p><b>Esimerkki:</b></p>

```jsx
// app/components/ContactForm.jsx (Modified)
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  )
}

export default function ContactForm() {
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Name:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">Message:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Selitys:</b></p>

<ul>
  <li><b>Tila viesteille:</b> On otettu käyttöön <code>message</code>-tilamuuttuja, johon tallennetaan palvelintoiminnon palauttama tulos.</li>
  <li><b>Tuloksen käsittely:</b> Kun lomake on lähetetty, <code>handleSubmit</code>-funktio päivittää <code>message</code>-tilan palvelintoiminnon tuloksella.</li>
  <li><b>Viestien näyttäminen:</b> Komponentti näyttää viestin tuloksen <code>success</code>-ominaisuuden perusteella, käyttäen eri CSS-luokkia onnistumis- ja virhetiloille.</li>
</ul>

<h3>Progressiivinen parantaminen</h3>

<p><code>experimental_useFormStatus</code> loistaa progressiivisen parantamisen skenaarioissa. Parantamalla progressiivisesti standardia HTML-lomaketta Reactilla voit tarjota paremman käyttäjäkokemuksen uhraamatta perustoiminnallisuutta, jos JavaScript epäonnistuu.</p>

<p><b>Esimerkki:</b></p>

<p>Aloitetaan perusmuotoisesta HTML-lomakkeesta:</p>

```html

<form action="/submit-contact" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required />
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />
  </div>
  <div>
    <label for="message">Message:</label>
    <textarea id="message" name="message" required>

```

Voit sitten parantaa sitä progressiivisesti Reactilla ja experimental_useFormStatus-koukulla.

```jsx // app/components/EnhancedContactForm.jsx 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; import { useFormState } from 'react-dom'; function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function EnhancedContactForm() { const [message, setMessage] = useState(null); const [state, formAction] = useFormState(submitContactForm, null); // Use null as initial state if not relying on it return (

Name:

Email:

Message:

</div>
        <SubmitButton />
		{state?.message && (
        <p className={state.success ? 'success' : 'error'}>
          {state.message}
        </p>
      )}
      </form>
    </div>
  );
}
```

<p><b>Selitys:</b></p>

<ul>
  <li><b>Alkuperäinen HTML-lomake:</b> <code>public/contact.html</code>-tiedosto sisältää standardin HTML-lomakkeen, joka toimii jopa ilman JavaScriptiä.</li>
  <li><b>Progressiivinen parantaminen:</b> <code>EnhancedContactForm</code>-komponentti parantaa progressiivisesti HTML-lomaketta. Jos JavaScript on käytössä, React ottaa ohjat ja tarjoaa rikkaamman käyttäjäkokemuksen.</li>
  <li><b><code>useFormState</code>-koukku:</b> Käyttää <code>useFormState</code>-koukkua lomakkeen tilan hallintaan ja palvelintoiminnon sitomiseen lomakkeeseen.</li>
	<li> <b><code>state</code>:</b> <code>useFormState</code>-koukun palauttama <code>state</code> sisältää nyt palvelintoiminnon palautusarvon, josta voidaan tarkistaa onnistumis- tai virheilmoitukset.</li>
</ul>

<h3>Kansainväliset näkökohdat</h3>

<p>Kun toteutat lomakkeita maailmanlaajuiselle yleisölle, on otettava huomioon useita kansainvälisiä seikkoja:</p>

<ul>
  <li><b>Lokalisointi:</b> Varmista, että lomakkeesi otsikot, viestit ja virheilmoitukset on lokalisoitu eri kielille. Työkalut, kuten i18next, voivat auttaa käännösten hallinnassa.</li>
  <li><b>Päivämäärä- ja numeromuodot:</b> Käsittele päivämäärä- ja numeromuodot käyttäjän kielialueen mukaisesti. Käytä kirjastoja, kuten <code>Intl</code> tai <code>moment.js</code> (vaikka sitä pidetäänkin nykyään vanhentuneena päivämäärien muotoiluun), päivämäärien ja numeroiden oikeaan muotoiluun.</li>
  <li><b>Osoitemuodot:</b> Eri maissa on erilaiset osoitemuodot. Harkitse kirjaston käyttöä, joka tukee useita osoitemuotoja, tai luo mukautettuja lomakekenttiä käyttäjän sijainnin perusteella.</li>
  <li><b>Puhelinnumeron validointi:</b> Validoi puhelinnumerot kansainvälisten standardien mukaisesti. Kirjastot, kuten <code>libphonenumber-js</code>, voivat auttaa tässä.</li>
  <li><b>Oikealta vasemmalle (RTL) -tuki:</b> Varmista, että lomakkeesi asettelu tukee RTL-kieliä, kuten arabiaa tai hepreaa. Käytä CSS:n loogisia ominaisuuksia (esim. <code>margin-inline-start</code> <code>margin-left</code>:n sijaan) paremman RTL-tuen saavuttamiseksi.</li>
  <li><b>Saavutettavuus:</b> Noudata saavutettavuusohjeita (WCAG) varmistaaksesi, että lomakkeesi ovat käytettävissä vammaisille ihmisille heidän sijainnistaan riippumatta.</li>
</ul>

<p><b>Esimerkki: Lokalisoidut lomakkeen otsikot</b></p>

```jsx
// i18n/locales/en.json
{
  "contactForm": {
    "nameLabel": "Name",
    "emailLabel": "Email",
    "messageLabel": "Message",
    "submitButton": "Submit",
    "successMessage": "Form submitted successfully!",
    "errorMessage": "Failed to submit form."
  }
}

// i18n/locales/fr.json
{
  "contactForm": {
    "nameLabel": "Nom",
    "emailLabel": "Courriel",
    "messageLabel": "Message",
    "submitButton": "Soumettre",
    "successMessage": "Formulaire soumis avec succès !",
    "errorMessage": "Échec de la soumission du formulaire."
  }
}

// app/components/LocalizedContactForm.jsx
'use client'

import { useTranslation } from 'react-i18next';
import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()
  const { t } = useTranslation();

return (
    <button type="submit" disabled={pending}>
      {pending ? t('contactForm.submitButton', {ns: 'contactForm'}) : t('contactForm.submitButton', {ns: 'contactForm'})}
    </button>
  )
}

export default function LocalizedContactForm() {
  const { t } = useTranslation();
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">{t('contactForm.nameLabel', {ns: 'contactForm'})}:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">{t('contactForm.emailLabel', {ns: 'contactForm'})}:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">{t('contactForm.messageLabel', {ns: 'contactForm'})}:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Selitys:</b></p>

<ul>
  <li><b>Käännöstiedostot:</b> Esimerkki käyttää <code>react-i18next</code>-kirjastoa käännösten hallintaan. Erilliset JSON-tiedostot sisältävät käännökset eri kielille.</li>
  <li><b><code>useTranslation</code>-koukku:</b> <code>useTranslation</code>-koukku antaa pääsyn käännösfunktioon (<code>t</code>), jota käytetään lokalisoitujen merkkijonojen hakemiseen.</li>
  <li><b>Lokalisoidut otsikot:</b> Lomakkeen otsikot ja painikkeen teksti haetaan <code>t</code>-funktiolla, mikä varmistaa, että ne näytetään käyttäjän haluamalla kielellä.</li>
</ul>

<h3>Saavutettavuusnäkökohdat</h3>

<p>On ratkaisevan tärkeää varmistaa, että lomakkeesi ovat saavutettavissa kaikille käyttäjille, myös vammaisille. Tässä on joitakin keskeisiä saavutettavuusnäkökohtia:</p>

<ul>
  <li><b>Semanttinen HTML:</b> Käytä semanttisia HTML-elementtejä, kuten <code><label></code>, <code><input></code>, <code><textarea></code> ja <code><button></code>, oikein.</li>
  <li><b>Otsikot (Labels):</b> Yhdistä otsikot lomake-elementteihin käyttämällä <code>for</code>-attribuuttia <code><label></code>-elementissä ja <code>id</code>-attribuuttia lomake-elementissä.</li>
  <li><b>ARIA-attribuutit:</b> Käytä ARIA-attribuutteja antamaan lisätietoa avustaville teknologioille. Käytä esimerkiksi <code>aria-describedby</code>-attribuuttia linkittämään lomake-elementti kuvaukseen.</li>
  <li><b>Virheidenkäsittely:</b> Ilmoita virheet selkeästi ja anna hyödyllisiä virheilmoituksia. Käytä ARIA-attribuutteja, kuten <code>aria-invalid</code>, osoittamaan virheelliset lomake-elementit.</li>
  <li><b>Näppäimistöllä navigointi:</b> Varmista, että käyttäjät voivat navigoida lomakkeella näppäimistön avulla. Käytä tarvittaessa <code>tabindex</code>-attribuuttia fokusjärjestyksen hallintaan.</li>
  <li><b>Värikontrasti:</b> Varmista riittävä värikontrasti tekstin ja taustavärien välillä.</li>
  <li><b>Lomakkeen rakenne:</b> Käytä selkeää ja johdonmukaista lomakkeen rakennetta. Ryhmittele toisiinsa liittyvät lomake-elementit käyttämällä <code><fieldset></code>- ja <code><legend></code>-elementtejä.</li>
</ul>

<p><b>Esimerkki: Saavutettava virheidenkäsittely</b></p>

```jsx
// app/components/AccessibleContactForm.jsx
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  )
}

export default function AccessibleContactForm() {
  const [message, setMessage] = useState(null);
  const [errors, setErrors] = useState({});

async function handleSubmit(formData) {
    // Basic client-side validation
    const newErrors = {};
    if (!formData.get('name')) {
      newErrors.name = 'Name is required.';
    }
    if (!formData.get('email')) {
      newErrors.email = 'Email is required.';
    }
    if (!formData.get('message')) {
      newErrors.message = 'Message is required.';
    }

if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

setErrors({}); // Clear previous errors
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Name:</label>
          <input
            type="text"
            id="name"
            name="name"
            aria-invalid={!!errors.name}
            aria-describedby="name-error"
            required
          />
          {errors.name && (
            <p id="name-error" className="error">
              {errors.name}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            id="email"
            name="email"
            aria-invalid={!!errors.email}
            aria-describedby="email-error"
            required
          />
          {errors.email && (
            <p id="email-error" className="error">
              {errors.email}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="message">Message:</label>
          <textarea
            id="message"
            name="message"
            aria-invalid={!!errors.message}
            aria-describedby="message-error"
            required
          />
          {errors.message && (
            <p id="message-error" className="error">
              {errors.message}
            </p>
          )}
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Selitys:</b></p>

<ul>
  <li><b>Virhetila:</b> Komponentti ylläpitää <code>errors</code>-tilaa validointivirheiden seuraamiseksi.</li>
  <li><b>Asiakaspuolen validointi:</b> <code>handleSubmit</code>-funktio suorittaa perusmuotoisen asiakaspuolen validoinnin ennen lomakkeen lähettämistä.</li>
  <li><b>ARIA-attribuutit:</b> <code>aria-invalid</code>-attribuutti asetetaan arvoon <code>true</code>, jos tietyssä lomake-elementissä on virhe. <code>aria-describedby</code>-attribuutti linkittää lomake-elementin virheilmoitukseen.</li>
  <li><b>Virheilmoitukset:</b> Virheilmoitukset näytetään vastaavien lomake-elementtien vieressä.</li>
</ul>

<h2>Mahdolliset haasteet ja rajoitukset</h2>

<ul>
  <li><b>Kokeellinen status:</b> Koska <code>experimental_useFormStatus</code> on kokeellinen API, se voi muuttua tai poistua tulevissa React-versioissa. On tärkeää pysyä ajan tasalla Reactin dokumentaatiosta ja olla valmis mukauttamaan koodia tarvittaessa.</li>
  <li><b>Rajoitettu laajuus:</b> Koukku keskittyy pääasiassa lähetystilan seurantaan eikä tarjoa kattavia lomakkeen hallintaominaisuuksia, kuten validointia tai datankäsittelyä. Saatat joutua toteuttamaan lisälogiikkaa näitä varten.</li>
  <li><b>Riippuvuus palvelintoiminnoista:</b> Koukku on suunniteltu toimimaan palvelintoimintojen kanssa, mikä ei välttämättä sovi kaikkiin käyttötapauksiin. Jos et käytä palvelintoimintoja, saatat joutua etsimään vaihtoehtoisia ratkaisuja lomakkeen tilan hallintaan.</li>
</ul>

<h2>Yhteenveto</h2>

<p><code>experimental_useFormStatus</code>-koukku tarjoaa merkittävän parannuksen lomakkeen lähetystilojen hallintaan Reactissa, erityisesti työskenneltäessä palvelintoimintojen ja progressiivisen parantamisen kanssa. Yksinkertaistamalla tilanhallintaa ja tarjoamalla selkeän ja ytimekkään API:n se parantaa sekä kehittäjä- että käyttäjäkokemusta. Sen kokeellisen luonteen vuoksi on kuitenkin tärkeää pysyä ajan tasalla päivityksistä ja mahdollisista muutoksista tulevissa React-versioissa. Ymmärtämällä sen hyödyt, rajoitukset ja parhaat käytännöt voit tehokkaasti hyödyntää <code>experimental_useFormStatus</code>-koukkua rakentaaksesi vankempia ja käyttäjäystävällisempiä lomakkeita React-sovelluksissasi. Muista ottaa huomioon kansainvälistämisen ja saavutettavuuden parhaat käytännöt luodaksesi osallistavia lomakkeita maailmanlaajuiselle yleisölle.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">lomakkeen tila</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React-lomakkeet</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">kokeellinen API</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React-koukut</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">lomakkeen lähetys</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">asynkroniset lomakkeet</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">progressiivinen parantaminen</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div style="display:none" id="S:3"></div><script>$RC("B:3","S:3")</script><div style="display:none" id="S:0"><template id="P:4"></template><template id="P:5"></template><template id="P:6"></template><template id="P:7"></template><template id="P:8"></template><template id="P:9"></template><template id="P:a"></template><template id="P:b"></template><template id="P:c"></template><template id="P:d"></template><template id="P:e"></template><template id="P:f"></template><template id="P:10"></template><template id="P:11"></template><template id="P:12"></template><template id="P:13"></template><template id="P:14"></template><template id="P:15"></template><template id="P:16"></template><template id="P:17"></template><template id="P:18"></template><template id="P:19"></template><template id="P:1a"></template><template id="P:1b"></template><template id="P:1c"></template><template id="P:1d"></template><template id="P:1e"></template><template id="P:1f"></template><template id="P:20"></template><template id="P:21"></template><template id="P:22"></template><template id="P:23"></template><template id="P:24"></template><template id="P:25"></template><template id="P:26"></template><template id="P:27"></template><template id="P:28"></template><template id="P:29"></template><template id="P:2a"></template><template id="P:2b"></template><template id="P:2c"></template><template id="P:2d"></template><template id="P:2e"></template><template id="P:2f"></template><template id="P:30"></template><template id="P:31"></template><template id="P:32"></template><template id="P:33"></template><template id="P:34"></template><template id="P:35"></template><template id="P:36"></template><template id="P:37"></template><template id="P:38"></template><template id="P:39"></template><template id="P:3a"></template><template id="P:3b"></template><template id="P:3c"></template><template id="P:3d"></template><template id="P:3e"></template><template id="P:3f"></template><template id="P:40"></template><template id="P:41"></template><template id="P:42"></template><template id="P:43"></template><template id="P:44"></template><template id="P:45"></template><template id="P:46"></template></div><link rel="alternate" hrefLang="ko" href="https://mlog.uz/ko/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="ar" href="https://mlog.uz/ar/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="hi" href="https://mlog.uz/hi/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="tr" href="https://mlog.uz/tr/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="nl" href="https://mlog.uz/nl/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="pl" href="https://mlog.uz/pl/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="sv" href="https://mlog.uz/sv/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="no" href="https://mlog.uz/no/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="da" href="https://mlog.uz/da/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="fi" href="https://mlog.uz/fi/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="cs" href="https://mlog.uz/cs/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="hu" href="https://mlog.uz/hu/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="ro" href="https://mlog.uz/ro/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="bg" href="https://mlog.uz/bg/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="hr" href="https://mlog.uz/hr/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="sk" href="https://mlog.uz/sk/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="sl" href="https://mlog.uz/sl/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="et" href="https://mlog.uz/et/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="lv" href="https://mlog.uz/lv/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="lt" href="https://mlog.uz/lt/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="el" href="https://mlog.uz/el/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="he" href="https://mlog.uz/he/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="th" href="https://mlog.uz/th/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="vi" href="https://mlog.uz/vi/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="id" href="https://mlog.uz/id/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="bn" href="https://mlog.uz/bn/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="uk" href="https://mlog.uz/uk/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="uz" href="https://mlog.uz/uz/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="fa" href="https://mlog.uz/fa/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="gu" href="https://mlog.uz/gu/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="kn" href="https://mlog.uz/kn/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="ml" href="https://mlog.uz/ml/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="mr" href="https://mlog.uz/mr/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="ta" href="https://mlog.uz/ta/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="te" href="https://mlog.uz/te/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="x-default" href="https://mlog.uz/en/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><meta name="format-detection" content="telephone=no, address=no, email=no"/><meta name="google-site-verification" content="your-google-verification-code"/><meta name="yandex-verification" content="your-yandex-verification-code"/><meta property="og:title" content="Reactin experimental_useFormStatus-toteutus: Parannettu lomakkeen tilanhallinta"/><meta property="og:description" content="Tutustu Reactin experimental_useFormStatus-koukkuun tehostetussa lomakkeen tilanhallinnassa. Opi sen toteutus, hyödyt ja edistynyt käyttö esimerkkien avulla."/><meta property="og:url" content="https://mlog.uz/fi/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><meta property="og:site_name" content="MLOG - Blog Platform"/><meta property="og:locale" content="fi"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2025-09-02T08:47:51.836Z"/><meta property="article:modified_time" content="2025-09-02T08:47:51.836Z"/><meta property="article:author" content="MEZES"/><meta property="article:tag" content="React"/><meta property="article:tag" content="useFormStatus"/><meta property="article:tag" content="lomakkeen tila"/><meta property="article:tag" content="React-lomakkeet"/><meta property="article:tag" content="kokeellinen API"/><meta property="article:tag" content="React-koukut"/><meta property="article:tag" content="lomakkeen lähetys"/><meta property="article:tag" content="asynkroniset lomakkeet"/><meta property="article:tag" content="progressiivinen parantaminen"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="mlog.uz"/><meta name="twitter:creator" content="MEZES"/><meta name="twitter:title" content="Reactin experimental_useFormStatus-toteutus: Parannettu lomakkeen tilanhallinta"/><meta name="twitter:description" content="Tutustu Reactin experimental_useFormStatus-koukkuun tehostetussa lomakkeen tilanhallinnassa. Opi sen toteutus, hyödyt ja edistynyt käyttö esimerkkien avulla."/><meta name="twitter:image" content="https://mlog.uz/images/mlog.jpg"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="32x32"/><link rel="icon" href="/images/mlog-192.png"/><link rel="apple-touch-icon" href="/images/mlog-192.png"/><script >document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><div hidden id="S:4"></div><script>$RS("S:4","P:4")</script><div hidden id="S:5"></div><script>$RS("S:5","P:5")</script><div hidden id="S:6"></div><script>$RS("S:6","P:6")</script><div hidden id="S:7"></div><script>$RS("S:7","P:7")</script><div hidden id="S:8"></div><script>$RS("S:8","P:8")</script><div hidden id="S:9"></div><script>$RS("S:9","P:9")</script><div hidden id="S:a"></div><script>$RS("S:a","P:a")</script><div hidden id="S:b"></div><script>$RS("S:b","P:b")</script><div hidden id="S:c"></div><script>$RS("S:c","P:c")</script><div hidden id="S:d"></div><script>$RS("S:d","P:d")</script><div hidden id="S:e"></div><script>$RS("S:e","P:e")</script><div hidden id="S:f"></div><script>$RS("S:f","P:f")</script><div hidden id="S:10"></div><script>$RS("S:10","P:10")</script><div hidden id="S:11"></div><script>$RS("S:11","P:11")</script><div hidden id="S:12"></div><script>$RS("S:12","P:12")</script><div hidden id="S:13"></div><script>$RS("S:13","P:13")</script><div hidden id="S:14"></div><script>$RS("S:14","P:14")</script><div hidden id="S:15"></div><script>$RS("S:15","P:15")</script><div hidden id="S:16"></div><script>$RS("S:16","P:16")</script><div hidden id="S:17"></div><script>$RS("S:17","P:17")</script><div hidden id="S:18"></div><script>$RS("S:18","P:18")</script><div hidden id="S:19"></div><script>$RS("S:19","P:19")</script><div hidden id="S:1a"></div><script>$RS("S:1a","P:1a")</script><div hidden id="S:1b"></div><script>$RS("S:1b","P:1b")</script><div hidden id="S:1c"></div><script>$RS("S:1c","P:1c")</script><div hidden id="S:1d"></div><script>$RS("S:1d","P:1d")</script><div hidden id="S:1e"></div><script>$RS("S:1e","P:1e")</script><div hidden id="S:1f"></div><script>$RS("S:1f","P:1f")</script><div hidden id="S:20"></div><script>$RS("S:20","P:20")</script><div hidden id="S:21"></div><script>$RS("S:21","P:21")</script><div hidden id="S:22"></div><script>$RS("S:22","P:22")</script><div hidden id="S:23"></div><script>$RS("S:23","P:23")</script><div hidden id="S:24"></div><script>$RS("S:24","P:24")</script><div hidden id="S:25"></div><script>$RS("S:25","P:25")</script><div hidden id="S:26"></div><script>$RS("S:26","P:26")</script><div hidden id="S:27"></div><script>$RS("S:27","P:27")</script><div hidden id="S:28"></div><script>$RS("S:28","P:28")</script><div hidden id="S:29"></div><script>$RS("S:29","P:29")</script><div hidden id="S:2a"></div><script>$RS("S:2a","P:2a")</script><div hidden id="S:2b"></div><script>$RS("S:2b","P:2b")</script><div hidden id="S:2c"></div><script>$RS("S:2c","P:2c")</script><div hidden id="S:2d"></div><script>$RS("S:2d","P:2d")</script><div hidden id="S:2e"></div><script>$RS("S:2e","P:2e")</script><div hidden id="S:2f"></div><script>$RS("S:2f","P:2f")</script><div hidden id="S:30"></div><script>$RS("S:30","P:30")</script><div hidden id="S:31"></div><script>$RS("S:31","P:31")</script><div hidden id="S:32"></div><script>$RS("S:32","P:32")</script><div hidden id="S:33"></div><script>$RS("S:33","P:33")</script><div hidden id="S:34"></div><script>$RS("S:34","P:34")</script><div hidden id="S:35"></div><script>$RS("S:35","P:35")</script><div hidden id="S:36"></div><script>$RS("S:36","P:36")</script><div hidden id="S:37"></div><script>$RS("S:37","P:37")</script><div hidden id="S:38"></div><script>$RS("S:38","P:38")</script><div hidden id="S:39"></div><script>$RS("S:39","P:39")</script><div hidden id="S:3a"></div><script>$RS("S:3a","P:3a")</script><div hidden id="S:3b"></div><script>$RS("S:3b","P:3b")</script><div hidden id="S:3c"></div><script>$RS("S:3c","P:3c")</script><div hidden id="S:3d"></div><script>$RS("S:3d","P:3d")</script><div hidden id="S:3e"></div><script>$RS("S:3e","P:3e")</script><div hidden id="S:3f"></div><script>$RS("S:3f","P:3f")</script><div hidden id="S:40"></div><script>$RS("S:40","P:40")</script><div hidden id="S:41"></div><script>$RS("S:41","P:41")</script><div hidden id="S:42"></div><script>$RS("S:42","P:42")</script><div hidden id="S:43"></div><script>$RS("S:43","P:43")</script><div hidden id="S:44"></div><script>$RS("S:44","P:44")</script><div hidden id="S:45"></div><script>$RS("S:45","P:45")</script><div hidden id="S:46"></div><script>$RS("S:46","P:46")</script><script>$RC("B:0","S:0")</script></body></html>

Reactin experimental_useFormStatus-toteutus: Parannettu lomakkeen tilanhallinta

Mitä on experimental_useFormStatus?

Perustoteutus

Edellytykset

Esimerkki: Yksinkertainen yhteydenottolomake

Mitä on `experimental_useFormStatus`?